<template>
	<view class="wallet-box">
		<view class="wallet-num-box">
			<image class="num-box-bg" src="https://image.nanjingtouyang.com/touy/2023/12/04/b316554c3f22421aa906e269e142200a.png"></image>
			<view class="num-box-top">
				<view class="top-title">余额</view>
				<view v-if="balance" class="top-num">￥{{ balance }}</view>
				<view v-else class="top-num">￥0</view>
			</view>
			<view class="num-box-text">
				<view class="">规则说明：</view>
				<view class="text-txts">1、相关资质人员可发起教练认证入驻到透氧平台，平台中用户预约教练进行服务获取收益。
</view>
				<view class="">2、教练与场馆需核销用户订单后，方能获得收益。</view>
			</view>
		</view>
		
		<!-- 历史记录 -->
		<view class="history-list">
			<view class="history-title">
				<image class="history-title-icon" src="https://image.nanjingtouyang.com/touy/2023/12/04/27c1b7c5e6144e3d9d5e1a1d46696133.png"></image>
				<view class="history-title-txt">历史记录</view>
			</view>
			<view class="history-view">收入记录</view>
			
			<!-- 列表标题 -->
			<view class="history-list-title">
				<view class="title-type">类型</view>
				<view class="title-name">订单号</view>
				<view class="title-time">获得时间</view>
				<view class="title-money">金额</view>
			</view>
			<view class="history-list-item">
				<scroll-view class="scroll-view-item" scroll-y="true" @scrolltolower="getPageList">
					<view class="list-item-test" v-for="(item, index) in walletList" :key="index">
						<view class="title-type">{{ item.type }}</view>
						<view class="title-name">{{ item.orderNumber }}</view>
						<view class="title-time">{{ item.createTime.slice(0,10) }}</view>
						<view class="title-money">+{{ item.userIncome }}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import { getSpCurrentBalance } from "@/api/mine.js"
	export default {
		data(){
			return{
				walletNum: '',
				walletList: [],
				pageNum: 1,
				balance: ''
			}
		},
		onLoad(){
			this.getWalletNum()
		},
		methods:{
			getWalletNum() {
				getSpCurrentBalance().then(res => {
					
					this.balance = res.data.data.balance
					this.walletList = res.data.data.inRecordList
				})
			},
			
			getPageList() {
				this.pageNum ++
				this.getWalletRecord()	
			}
			
		
		}
	}
	
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.wallet-box {
		padding: 30rpx;
		box-sizing: border-box;
		.wallet-num-box {
			width: 100%;
			height: 376rpx;
			position: relative;
			.num-box-bg {
				width: 100%;
				height: 404rpx;
				position: absolute;
				top: 0%;
				left: 0;
			}
			.num-box-top {
				position: absolute;
				top: 60rpx;
				left: 60rpx;
				.top-title {
					font-size: 28rpx;
					font-weight: 400;
					color: #EA8153;
				}
				.top-num {
					font-size: 48rpx;
					font-weight: 500;
					color: #F66829;
					margin-top: 10rpx;
					max-width: 500rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.num-box-text {
				position: absolute;
				top: 226rpx;
				left: 30rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #D25117;
				line-height: 36rpx;
				.text-txts {
					margin-top: 10rpx;
				}
			}
		}
		.history-list {
			margin-top: 40rpx;
			.history-title {
				display: flex;
				.history-title-icon {
					width: 40rpx;
					height: 40rpx;
				}
				.history-title-txt {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
					margin-left: 10rpx;
				}
			}
			.history-view {
				width: 100%;
				height: 62rpx;
				background: #FFEAD5;
				border-radius: 38rpx;
				text-align: center;
				line-height: 62rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #D25117;
				margin-top: 30rpx;
			}
			.history-list-title {
				width: 100%;
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
				line-height: 32rpx;
				margin-top: 30rpx;
				.title-type {
					width: 114rpx;
					text-align: center;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.title-name {
					width: 174rpx;
					text-align: center;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.title-time {
					width: 170rpx;
					text-align: center;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.title-money {
					width: 96rpx;
					text-align: center;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.history-list-item {
				height: calc(100vh - 730rpx);
				// height: 50rpx;
				width: 100%;
				margin-top: 30rpx;
				// background-color: red;
				.scroll-view-item {
					width: 100%;
					height: 100%;
					.list-item-test {
						width: 100%;
						display: flex;
						justify-content: space-between;
						margin-bottom: 30rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #222222;
						.title-type {
							width: 114rpx;
							text-align: center;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.title-name {
							width: 174rpx;
							text-align: center;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.title-time {
							width: 170rpx;
							text-align: center;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.title-money {
							width: 96rpx;
							text-align: center;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							color: #46973B;
						}
					}
				}
			}
		}
	}
</style>